<!--
 * @description: 传感器数据展示
 * @Date: 2023-01-28 12:13:39
 * @example: 父应用
 * @params:
-->
<template>
  <el-card class="box-card">
    <el-button type="primary" :icon="ArrowLeft" @click="handleback()">Back</el-button>
    <div class="title">
      <p>deviceName : {{ title }}</p>
      <p>deviceId : {{ deviceId }}</p>
      <p>Location : ZhangKai的工位.</p>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" v-if="tableData.length">
      <el-tab-pane label="DataSource" name="first">
        <div class="tableContainer">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="data_id" label="date_id" width="180" />
            <el-table-column prop="temperature" label="temperature(温度)">
              <template #default="scope">
              
                  <count-to :startVal="0" :endVal="scope.row.temperature" :decimals="2" :duration="2000"></count-to>℃ 
                <!-- {{ scope.row.temperature }}℃ -->
              </template>
            </el-table-column>
            <el-table-column prop="humidity" label="humidity(湿度)">
              <template #default="scope"> 
              <!-- {{ scope.row.humidity }}%  -->
              
                <count-to :startVal="0" :endVal="scope.row.humidity" :decimals="2" :duration="2000"></count-to>% 
              </template>
            </el-table-column>
            <el-table-column prop="waterLeak" label="waterLeak(漏水)">
              <template #default="scope">
                <el-tag
                  :type="scope.row.waterLeak === 'leak' ? 'danger' : 'success'"
                  disable-transitions
                  >{{ scope.row.waterLeak }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="battery" label="battery(电量)">
              <template #default="scope">
                <el-tag type="success" disable-transitions
                  > 
                  <count-to :startVal="0" :endVal="scope.row.battery" :decimals="2" :duration="2000" />% </el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="deciceStatus" label="deciceStatus(在线情况)">
              <template #default="scope">
                <el-tag
                  :type="
                    scope.row.deciceStatus === 'true' ? 'success' : 'danger'
                  "
                  disable-transitions
                  >{{
                    scope.row.deciceStatus === "true" ? "online" : "Out"
                  }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="timestamp"
              label="UpdateTime"
              sortable
              column-key="timestamp"
            >
              <template #default="scope">
                {{ FormatterTime(scope.row.timestamp) }}
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <!-- 分页 -->
            <el-pagination
              v-model:current-page="query.currentPage"
              v-model:page-size="query.pageSize"
              :page-sizes="[5, 10, 15, 20]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="query.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <div class="Upload">
            <el-button type="primary" @click="handleDownXle()">
              Download Exel<el-icon class="el-icon--right"><Download /></el-icon>
              </el-button>
          </div>
          </div>
        
        </div>
      </el-tab-pane>
      <el-tab-pane label="Echarts" name="second">
      <SensorEchart :tableData="tableData" v-if="tableData.length" />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script setup lang="ts">
import * as XLSX from "xlsx";
import { useRoute,useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { CountTo } from 'vue3-count-to';
import http from "@/views/appstore/config/api";
import SensorEchart from '@/views/appstore/demo/SenEcharts.vue'
import {ArrowLeft, Download} from '@element-plus/icons-vue'


const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const deviceId = ref();
const tableData: any = ref([]);
const title = ref();
const route = useRoute();
const router = useRouter();
console.log(" route.params.title", route.params);
title.value = route.params.title;
const activeName = ref("first");
const query = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 20,
});

/** 页面大小 */
const handleSizeChange = (e) => {
  console.log("SizeChange:", e);
  query.pageSize = e;
  getSensorList();
};
const handleCurrentChange = (e) => {
  console.log("handleCurrentChange:", e);
  query.currentPage = e;
  getSensorList();
};
const getSensorList = () => {
  if(title.value !== 'EM300-ZLD 水浸传感器'){
    return
  }
  http.getSensorList(query).then((res) => {
    const { data, queryParams } = res.data;
    tableData.value = data;
    deviceId.value = data[0].deviceId;
    query.total = queryParams.total;
    query.currentPage = queryParams.currentPage;
    query.pageSize = queryParams.pageSize;
    // console.log("数据列表", res);
  });
};
const FormatterTime = (timestamp) => {
  let date = new Date(parseInt(timestamp));
  let Year = date.getFullYear();
  let Moth =
    date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1;
  let Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  let Hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  let Minute =
    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  let Sechond =
    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  let GMT =
    Year + "-" + Moth + "-" + Day + "   " + Hour + ":" + Minute + ":" + Sechond;
  return GMT;
};
const handleback = () => {
  router.back()
}
const handleDownXle = ()=> {
  const data = XLSX.utils.json_to_sheet(tableData.value)//此处tableData.value为表格的数据
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, data, 'EM300-ZLD')//test-data为自定义的sheet表名
  XLSX.writeFile(wb,'EM300-ZLD.xlsx')//test.xlsx为自定义的文件名
}
getSensorList();
</script>
<style scoped lang="less">
.box-card {
  width: 100%;
  // height: 100vh;

  .title {
    font-weight: bold;
    z-index: 9999;
    margin-top: 10px;
  }
  .tableContainer {
    width: 100%;
    margin-top: 20px;
    .pagination {
      width: 100%;
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      .Upload {
        position: absolute;
        margin-right: 20px;
        right: 0;
      }
    }
  }
}
</style>
